﻿<!DOCTYPE html>
<html>
<head>
<!--
  NOTE: This index page is primarily for demonstrative purposes.
  dashboard.html is more suitable for use as it has
  been stripped of added animations
-->

<!-- Meta, title, CSS, favicons, etc. -->
<meta charset="utf-8" />
<title>LVSLB - Web Administrator </title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<!-- Font CSS  -->
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Open+Sans:400,600,700" />

<!-- Core CSS  -->
<link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" href="fonts/glyphicons_pro/glyphicons.min.css" />

<!-- Plugin CSS -->
<link rel="stylesheet" type="text/css" href="vendor/plugins/calendar/fullcalendar.css" />
<link rel="stylesheet" type="text/css" href="vendor/plugins/datatables/css/datatables.min.css" />
<link rel="stylesheet" type="text/css" href="css/animate.css" />

<!-- Theme CSS -->
<link rel="stylesheet" type="text/css" href="css/theme.css" />
<link rel="stylesheet" type="text/css" href="css/pages.css" />
<link rel="stylesheet" type="text/css" href="css/plugins.css" />
<link rel="stylesheet" type="text/css" href="css/responsive.css" />

<!-- Demonstration CSS -->
<link rel="stylesheet" type="text/css" href="css/demo.css" />

<!-- Your Custom CSS -->
<link rel="stylesheet" type="text/css" href="css/custom.css" />

<!-- Favicon -->
<link rel="shortcut icon" href="img/favicon.ico" />

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>

<body class="dashboard index-load">


<!-- Start: Header -->
<header class="navbar navbar-fixed-top">
  <div class="pull-left"> <a class="navbar-brand" href="dashboard.html">
    <div class="navbar-logo"><img src="img/logos/kkplogo.png" class="img-responsive" alt="logo"  style="margin-top: -8px"/></div>
    </a> </div>
  <div class="pull-right header-btns">
    <div class="btn-group user-menu">
      <button type="button" class="btn btn-sm dropdown-toggle" data-toggle="dropdown"> <span class="glyphicons glyphicons-user"></span> <b>Admin</b> </button>
      <button type="button" class="btn btn-sm dropdown-toggle padding-none" data-toggle="dropdown" style="height: 30px;width: 25px;">
          <i class="caret"></i>
      </button>
      <ul class="dropdown-menu checkbox-persist" role="menu" style="margin-left: -145px">
        <li class="menu-arrow">
          <div class="menu-arrow-up"></div>
        </li>
        <li class="dropdown-header">Your Account <span class="pull-right glyphicons glyphicons-user"></span></li>
        <li>
          <ul class="dropdown-items">
            <li  class="border-bottom-none">
              <div class="item-icon"><i class="fa fa-envelope-o"></i> </div>
              <a class="item-message" href="messages.html">Messages</a> </li>
            <li>
              <div class="item-icon"><i class="fa fa-cog"></i> </div>
              <a class="item-message" href="customizer.html">Settings</a> </li>
            <li class="border-bottom-none">
                  <div class="item-icon"><i class="fa fa-sign-out"></i> </div>
                 <a href="login.html">Sign Out</a>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</header>
<!-- End: Header --> 
<!-- Start: Main -->
<div id="main"> 
  <!-- Start: Sidebar -->
  <aside id="sidebar">
    <div id="sidebar-search">
      <form role="search" />
        <input type="text" class="search-bar form-control" placeholder="Search" />
        <i class="fa fa-search field-icon-right"></i>
        <button type="submit" class="btn btn-default hidden"></button>
      </form>
      <div class="sidebar-toggle"> <i class="fa fa-bars"></i> </div>
    </div>
    <div id="sidebar-menu">
      <ul class="nav sidebar-nav">

        <li class="active"> <a href="index.html"><span class="glyphicons glyphicons-star"></span><span class="sidebar-title">Dashboard</span></a> </li>
        <li> <a class="accordion-toggle" href="#resources"><span class="glyphicons glyphicons-settings"></span><span class="sidebar-title">Configuration</span><span class="caret"></span></a>
          <ul id="resources" class="nav sub-nav menu-open">
            <li><a href="customizer.html"><span style="width: 15px;" class="glyphicons glyphicons-edit"></span> Load Balancer</a></li>
            <li><a href="documentation/index.html"><span class="glyphicons glyphicons-user"></span> User </a></li>
          </ul>
        </li>
        <li class="active"> <a href="index.html"><span class="glyphicons glyphicons-display"></span><span class="sidebar-title">Server</span></a> </li>
        <li class="active"> <a href="index.html"><span class="glyphicons glyphicons-lightbulb"></span><span class="sidebar-title">Log</span></a> </li>
      </ul>
    </div>
  </aside>
  <!-- End: Sidebar --> 
  <!-- Start: Content -->
  <section id="content">
    <div id="topbar">
      <ol class="breadcrumb">
        <li><a href="dashboard.html"><i class="fa fa-home"></i></a></li>
        <li><a href="index.html">Home</a></li>
        <li class="active">Dashboard</li>
      </ol>
    </div>
    <div class="container" style="padding-top: 15px!important;">

      <hr class="short" />
      <div class="row">
        <div class="col-md-12">
          <div class="row">
            <div class="col-md-12"> </div>
            <div class="col-md-12">
              <div class="panel">
                <div class="panel-heading">
                  <div class="panel-title"> <i class="fa fa-bar-chart-o"></i> Real Time Site Traffic</div>
                </div>
                <div class="panel-body">
                  <div class="chart-updating" style="height: 300px; width: 100%;"></div>
                  </div>
                  <div class="panel-footer">
          
                    <div class="row">
                      <div class="col-xs-4 col-sm-3 text-center">
                        <div class="chart-btn">
                          <div class="chart-icon"> <span class="sparkbar1 sparkline-delay" data-delay="300"></span> </div>
                          <div class="chart-text">
                            <div class="chart-title">5,231</div>
                            <div class="chart-subtitle">Hits</div>
                          </div>
                        </div>
                      </div>
                      <div class="col-xs-4 col-sm-3 text-center">
                        <div class="chart-btn">
                          <div class="chart-icon"> <span class="sparkbar2 sparkline-delay" data-delay="300"></span> </div>
                          <div class="chart-text">
                            <div class="chart-title">7,181</div>
                            <div class="chart-subtitle">Visits</div>
                          </div>
                        </div>
                      </div>
                      <div class="col-xs-4 col-sm-3 text-center">
                        <div class="chart-btn">
                          <div class="chart-icon"> <span class="sparkbar3 sparkline-delay" data-delay="300"></span> </div>
                          <div class="chart-text">
                            <div class="chart-title">2,462</div>
                            <div class="chart-subtitle">Sales</div>
                          </div>
                        </div>
                      </div>
                      <div class="hidden-xs col-sm-3 text-center">
                        <div class="chart-btn">
                          <div class="chart-icon"> <span class="sparkbar4 sparkline-delay" data-delay="300"></span> </div>
                          <div class="chart-text">
                            <div class="chart-title">1,385</div>
                            <div class="chart-subtitle">Users</div>
                          </div>
                        </div>
                      </div>
                    </div>
                </div>
              </div>
            </div>
            <div class="col-md-12">
              <div class="panel">
                <div class="panel-heading">
                  <div class="panel-title"> <i class="fa fa-pencil"></i> Recent Activity </div>
                  <ul class="nav panel-tabs">
                    <li class="active"><a href="#tab1" data-toggle="tab">Tasks</a></li>
                    <li><a href="#tab2" data-toggle="tab">Tickets</a></li>
                    <li><a href="#tab3" data-toggle="tab">Comments</a></li>
                  </ul>
                </div>
                <div class="panel-body">
                  <div class="tab-content padding-none border-none">
                    <div id="tab1" class="tab-pane active">
                      <table class="table table-widget table-striped table-checklist" id="datatable">
                        <thead>
                          <tr>
                            <th>Task</th>
                            <th>Progress</th>
                            <th>Skills</th>
                            <th>Notes</th>
                            <th>Deadline</th>
                            <th></th>
                          </tr>
                        </thead>
                        <tbody>
                          <tr>
                            <td class="text-slash">Test Building presentation <b>Capacity</b></td>
                            <td><div class="progress">
                                <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%"><span class="sr-only">40% Complete (success)</span> </div>
                              </div></td>
                            <td><span class="label btn-dark">Patience</span></td>
                            <td class="text-slash text-muted"><small>400 people will attend</small></td>
                            <td class="text-slash semi-bold">11/14/2013</td>
                            <td class="text-right"><input class="checkbox row-checkbox" type="checkbox" /></td>
                          </tr>
                          <tr>
                            <td class="text-slash">Write check to <b>Kids Hospital</b> for Holiday</td>
                            <td><div class="progress">
                                <div class="progress-bar progress-bar-alert" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%"><span class="sr-only">40% Complete (success)</span> </div>
                              </div></td>
                            <td><span class="label btn-blue">A Heart</span></td>
                            <td class="text-slash text-muted"><small>Amount is still $4,500</small></td>
                            <td class="text-slash semi-bold">11/14/2013</td>
                            <td class="text-right"><input class="checkbox row-checkbox" type="checkbox" /></td>
                          </tr>
                          <tr>
                            <td class="text-slash"><b>Upload</b> all 1400 Icons to Server</td>
                            <td><div class="progress">
                                <div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%"><span class="sr-only">80% Complete</span> </div>
                              </div></td>
                            <td><span class="label btn-orange2">Python</span><span class="label btn-alert">DB</span></td>
                            <td class="text-slash text-muted"><small>400 people will attend</small></td>
                            <td class="text-slash semi-bold">11/14/2013</td>
                            <td class="text-right"><input class="checkbox row-checkbox" type="checkbox" /></td>
                          </tr>
                          <tr>
                            <td class="text-slash">Restyle <b>Themeforest</b> website design</td>
                            <td><div class="progress">
                                <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%"><span class="sr-only">60% Complete (warning)</span> </div>
                              </div></td>
                            <td><span class="label btn-blue2">CSS</span><span class="label btn-green">Html</span></td>
                            <td class="text-slash text-muted"><small>400 people will attend</small></td>
                            <td class="text-slash semi-bold">11/14/2013</td>
                            <td class="text-right"><input class="checkbox row-checkbox" type="checkbox" /></td>
                          </tr>
                        </tbody>
                      </table>
                    </div>
                    <div id="tab2" class="tab-pane">
                      <table class="table table-striped table-widget table-checklist" id="datatable_2">
                        <thead>
                          <tr>
                            <th>Status</th>
                            <th>Date</th>
                            <th>Description</th>
                            <th>Assigned To</th>
                            <th>Number</th>
                          </tr>
                        </thead>
                        <tbody>
                          <tr>
                            <td><span class="label label-primary">PHP</span></td>
                            <td>10/19/2013</td>
                            <td>Develop <b>Prototype</b> for amazon matrix</td>
                            <td>Ashley Time</td>
                            <td><b>[#4311525]</b></td>
                          </tr>
                          <tr>
                            <td><span class="label label-primary">Utility</span></td>
                            <td>11/14/2013</td>
                            <td>Convert Frontend to <b>Bootstrap 3</b></td>
                            <td>Roger Wins</td>
                            <td><b>[#1531275]</b></td>
                          </tr>
                          <tr>
                            <td><span class="label label-primary">CSS</span></td>
                            <td>01/03/2014</td>
                            <td>Re-Style client <b>Header</b> for release</td>
                            <td>Kevin Heart</td>
                            <td><b>[#6233255]</b></td>
                          </tr>
                          <tr>
                            <td><span class="label label-primary">HTML</span></td>
                            <td>10/29/2013</td>
                            <td>Create new <b>Accordion</b> for FAQ</td>
                            <td>Jacop Parker</td>
                            <td><b>[#5332275]</b></td>
                          </tr>
                        </tbody>
                      </table>
                    </div>
                    <div id="tab3" class="tab-pane chat-panel">
                      <div class="media margin-top-sm">
                        <div class="media-img pull-left"> <img src="img/avatars/2.png" class="img-responsive" alt="avatar" /> </div>
                        <div class="media-body">
                          <div class="media-content">
                            <h4 class="media-heading">Marry Wilconson</h4>
                            <p class="media-timestamp">January 12, 2013 at 1:38 pm</p>
                            Cras sit amet nibh libero, in grio, vestibulum in vulputate at,lla. Donec lacinia congue felis in faucibus. </div>
                        </div>
                      </div>
                      <div class="media">
                        <div class="media-img pull-left"> <img src="img/avatars/1.png" class="img-responsive" alt="avatar" /> </div>
                        <div class="media-body">
                          <div class="media-content">
                            <h4 class="media-heading">Todd Philips</h4>
                            <p class="media-timestamp">January 12, 2013 at 1:38 pm</p>
                            Cras sit amet nibh libero, in gravida nulla. Nulla vnec lacinia congue felis in faucibus.. Nulla vnec lacinia congue felis in faucibus. </div>
                          <div class="media margin-bottom">
                            <div class="media-img pull-left"> <img src="img/avatars/6.png" class="img-responsive" alt="avatar" /> </div>
                            <div class="media-body">
                              <div class="media-content">
                                <h4 class="media-heading">Roger Awesome</h4>
                                <p class="media-timestamp">January 12, 2013 at 1:38 pm</p>
                                Cras sit amet nibh libero,pus viverra turpis. Fuselis in faucibus. </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-md-12">
              <div class="panel">
                <div class="panel-heading">
                  <div class="panel-title"> <i class="fa fa-bar-chart-o"></i> Calendar</div>
                </div>
                <div class="panel-body">
                  <div id='calendar'></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  <!-- End: Content --> 
</div>
<!-- End: Main --> 

<!-- Begin: Front Page Loading Animation --> 
<div id="page-loader"><span class="glyphicon glyphicon-cog fa-spin cog-1"></span></div>
<!-- End: Front Page Loading Animation --> 

<!-- Core Javascript - via CDN -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>

<!-- Plugins - Via CDN -->
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/flot/0.8.1/jquery.flot.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-sparklines/2.1.2/jquery.sparkline.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/fullcalendar/1.6.4/fullcalendar.min.js"></script>

<!-- Plugins - Via Local Storage
<script type="text/javascript" src="vendor/plugins/jqueryflot/jquery.flot.min"></script>
<script type="text/javascript" src="vendor/plugins/sparkline/jquery.sparkline.min.js"></script>
<script type="text/javascript" src="vendor/plugins/datatables/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="vendor/plugins/calendar/fullcalendar.min.js"></script>
-->

<!-- Plugins -->
<script type="text/javascript" src="vendor/plugins/calendar/gcal.js"></script><!-- Calendar Addon -->
<script type="text/javascript" src="vendor/plugins/jqueryflot/jquery.flot.resize.min.js"></script><!-- Flot Charts Addon -->
<script type="text/javascript" src="vendor/plugins/datatables/js/datatables.js"></script><!-- Datatable Bootstrap Addon -->

<!-- Theme Javascript -->
<script type="text/javascript" src="js/uniform.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<!--<script type="text/javascript" src="js/plugins.js"></script>-->
<script type="text/javascript" src="js/custom.js"></script>
<script type="text/javascript">
  jQuery(document).ready(function() {
	  
	// Init Theme Core 	  
	Core.init();
	
	// Create an example page animation. Really
	// not suitable for production enviroments
	var headerAnimate = setTimeout(function() {
		// Animate Header from Top
		$('header').css("display", "block").addClass('animated bounceInDown');
	},300);
	
	// Add an aditional delay to hide the loading spinner
	// and animate body content from bottom of page
	var bodyAnimate = setTimeout(function() {
		// hide spinner
		$('#page-loader').css("display", "none");
		
		// show body and animate from bottom. At end of animation 
		// add several css properties because the animation will bug 
		// existing psuedo backgrounds(:after)
		$('#main').css("display", "block").addClass('animated animated-short bounceInUp').one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(){
			$('body').css({background: "#FFFFFF", overflow: "visible"});
			$('#content, #sidebar').addClass('refresh');
			// Init sparkline animations
			sparkload();
		});				
	 },1150);
	
	// Init Datatables
	$('#datatable, #datatable_2').dataTable( {
	  "bSort": true,
	  "bPaginate": false,
	  "bLengthChange": false,
	  "bFilter": false,
	  "bInfo": false,
	  "bAutoWidth": false,
	  "aoColumnDefs": [{ 'bSortable': false, 'aTargets': [ -1 ] }]
	});
	
	// Init Sparkline Plugin
 	var runSparkline = function () {
		
		// Define Sparklines values
		var Values1 = [0,1,5,2,4,3,5,8,7];
		var Values2 = [3,2,3,1,0,2,5,6,4];
		var Values3 = [6,4,5,3,4,2,1,2,3];
		var Values4 = [2,1,2,3,2,4,2,1,0];

	    // Pass values, define options, and create chart
		$('.sparkbar1').sparkline(Values1, {type: "bar",
				barColor: "#428bca",
				barWidth: "8",
				height: "35"} 
		);
		$('.sparkbar2').sparkline(Values2, {type: "bar",
				barColor: "#5cb85c",
				barWidth: "8",
				height: "35"} 
		);
		$('.sparkbar3').sparkline(Values3, {type: "bar",
				barColor: "#5bc0de",
				barWidth: "8",
				height: "35"} 
		);
		$('.sparkbar4').sparkline(Values4, {type: "bar",
				barColor: "#777777",
				barWidth: "8",
				height: "35"} 
		);
	}
		
	// Example function to animate the appearance of 
	// Sparklines. Only ran on Sparkline elements which 
	// have the ".sparkline-delay" class 
	var sparkload = function() {
		$('.sparkline-delay').each(function() {
			var This = $(this)
			var delayTime = $(this).data('delay');

			$(This).children('canvas').css({"height": "0", "vertical-align": "bottom"});
			var delayCharts = setTimeout(function () {
				$(This).css("display", "block");
				  $(This).children('canvas').animate({height: 35}, 800);
			}, 10); 
		});
	}		
  	
	// Init Calendar Plugin
	var runFullCalendar = function () {
		var date = new Date();
		var d = date.getDate();
		var m = date.getMonth();
		var y = date.getFullYear();
		
		// Define Calendar options and events
		$('#calendar').fullCalendar({
			header: {
				left: 'prev,next today',
				center: 'title',
				right: 'month,agendaWeek,agendaDay'
			},
			editable: true,
			events: [
				{
					title: 'All Day Event',
					start: new Date(y, m, 9),
					color: '#008aaf '
				},
				{
					title: 'Long Event',
					start: new Date(y, m, d-5),
					end: new Date(y, m, d-3)
				},
				{
					id: 999,
					title: 'Repeating Event',
					start: new Date(y, m, d+3, 16, 0),
					allDay: false
				},
				{
					id: 999,
					title: 'Repeating Event',
					start: new Date(y, m, d+10, 16, 0),
					allDay: false
				},
				{
					title: 'Meeting',
					start: new Date(y, m, d, 10, 30),
					allDay: false,
					color: '#0070ab'
				},
				{
					title: 'Lunch',
					start: new Date(y, m, d, 12, 0),
					end: new Date(y, m, d, 14, 0),
					allDay: false,
					color: '#0070ab'
				},
				{
					title: 'Birthday Party',
					start: new Date(y, m, d+1, 19, 0),
					end: new Date(y, m, d+1, 22, 30),
					allDay: false
				},
				{
					title: 'Mandatory!',
					start: new Date(y, m, 22),
					color: '#d10011'
				}
			]
		});
	}

	// Init Flot Charts Plugin
	var runFlotCharts = function () {
		
	// Define chart clolors ( add more colors if you want or flot will do it automatically
	var chartColours = ['#5bc0de'];

	// Generate random number for charts
	randNum = function(){return (Math.floor( Math.random()* (1+40-20) ) ) + 20;}

	// Check if element exist and draw auto updating chart
	if($(".chart-updating").length) {
		$(function () {
			// We use an inline data source in the example, usually data would
			// be fetched from a server
			var data = [], totalPoints = 50;
			function getRandomData() {
				if (data.length > 0)
					data = data.slice(1);

				while (data.length < totalPoints) {
					var prev = data.length > 0 ? data[data.length - 1] : 50;
					var y = prev + Math.random() * 10 - 5;
					if (y < 0)
						y = 0;
					if (y > 100)
						y = 100;
					data.push(y);
				}

				var res = [];
				for (var i = 0; i < data.length; ++i)
					res.push([i, data[i]])
				return res;
			}

			var updateInterval = 750;

			var options = {
				series: { 
					shadowSize: 0, // drawing is faster without shadows
					lines: {
						show: true,
						fill: true,
						fillColor: { colors: ['rgba(47, 137, 214, 0.4)', 'rgba(98, 174, 239, 0.3)'] },
						lineWidth: 1,
						steps: false
					},
					points: {
						show: false,
						radius: 2.5,
						symbol: "circle",
						lineWidth: 2.5
					}
				},
				grid: {
					show: true,
					aboveData: false,
					color: "#3f3f3f",
					labelMargin: 1,
					axisMargin: 0, 
					borderWidth: 0,
					borderColor:null,
					minBorderMargin: 1 ,
					clickable: true, 
					hoverable: true,
					autoHighlight: false,
					mouseActiveRadius: 20
				}, 
				colors: chartColours,
				yaxis: { 
					 min: 0,
					 max: 100,
					 font: {size: 11,	color: "#888888"}
				},
				xaxis: { 
					 show: true,
					 font: {size: 11,	color: "#888888"}
				}
			};
			var plot = $.plot($(".chart-updating"), [ getRandomData() ], options);

			function update() {
				plot.setData([ getRandomData() ]);
				// since the axes don't change, we don't need to call plot.setupGrid()
				plot.draw();
				
				setTimeout(update, updateInterval);
			}
			update();
		});
	  }
  }
     
  runSparkline();
  runFullCalendar();	  
  runFlotCharts();
			  

});
</script>
</body>
</html>
